<template>
  <div v-show="show" class="loading app-content">
    <div class="load-box">
      <mt-spinner type="triple-bounce" color="#26a2ff" :size="60"></mt-spinner>
      <div class='spinnermsg'>{{title}}</div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import {Spinner} from 'mint-ui';
  export default {
    components: {'v-spinner': Spinner},
    props: {
      replace: true,
      title: {
        type: String,
        default: '玩命加载中...'
      },
      show: {
        type: Boolean,
        default: true
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .loading
    z-index: 99999
    overflow: hidden
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    width: 100%
    height: 100%
    background rgba(7, 17, 27, 0.8)
    -webkit-backdrop-filter blur(10px)
    color: #fff
    .load-box
      position: absolute
      top: 50%
      left: 50%
      width: 100%
      transform: translate(-50%, -50%)
      text-align: center
      color: #fff
      font-size: 16px
      .spinnermsg
        margin-top 20px
</style>
